<template>
  <div class="app-container">
    <el-card>
      <el-form :inline="true" :model="searchForm" size="mini">
        <el-form-item label="银行名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入银行名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="发布平台">
          <el-select
            v-model="searchForm.platformType"
            placeholder="请选择发布平台"
            clearable
            size="small"
          >
            <el-option
              v-for="item in platformTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.enableStatus"
            placeholder="请选择状态"
            clearable
            size="small"
          >
            <el-option
              v-for="item in enableStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="resetForm('searchForm')"
            >重置</el-button
          >
          <el-button type="primary" icon="el-icon-search" @click="search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>

      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="addOutlets"
        >新增</el-button
      >

      <el-table
        :data="tableData.data"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column align="center" prop="id" label="Id" width="80" />

        <el-table-column align="center" prop="bankName" label="银行名称 " />
        <el-table-column align="center" prop="name" label="支行" />
        <el-table-column align="center" prop="telephone" label="电话" />
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enableStatus"
              :active-value="1"
              :inactive-value="0"
              @change="updateStatus(scope.row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" />
        <el-table-column align="center" prop="platformType" label="发布平台">
          <template slot-scope="scope">
            {{ scope.row.platformType.join("、") }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="detail(scope.row.id)"
              >查看</el-button
            >
            <el-button
              type="text"
              size="mini"
              :disabled="scope.row.enableStatus === 1"
              @click="editOutlets(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              :disabled="scope.row.enableStatus === 1"
              @click="deleteCredit(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageRight"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { bankBookpage, bankBookLoans, bankBookenableStatus } from "@/api/tool";
import { getDictLabel } from "@/utils/dict";
import { getBankList } from "@/api/system";
import { error } from "shelljs";

export default {
  data() {
    return {
      searchForm: {
        name: "",
        pageNum: 1,
        pageSize: 10,
        enableStatus: "",
      },
      platformTypeList: [],
      enableStatusList: [
        { label: "启用", value: 1 },
        { label: "禁用", value: 0 },
      ],
      tableData: {
        data: [],
        total: 0,
      },
      listLoading: false,
      bankList: [],
    };
  },
  async created() {
    this.platformTypeList = await this.$getDictData("platform_type");
    this.getBankList();
    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    getBankList() {
      getBankList().then((res) => {
        this.bankList = res.data;
      });
    },
    updateStatus(id) {
      console.log(id);

      bankBookenableStatus(id)
        .then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getList();
        })
        .catch((error) => {
          let idx = this.tableData.data.findIndex((item) => item.id === id);
          this.tableData.data[idx].enableStatus == 1 ? (this.tableData.data[idx].enableStatus = 0) : (this.tableData.data[idx].enableStatus = 1)
        });
    },
    deleteCredit(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        bankBookLoans(id).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getList();
        });
      });
    },
    async getList() {
      this.listLoading = true;
      bankBookpage(this.searchForm)
        .then((res) => {
          res.data.list.forEach((item) => {
            item.platformType = getDictLabel(
              item.platformType,
              this.platformTypeList
            );
          });
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.total;
          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    detail(id) {
      this.$router.push({
        path: "/tool/bankBookConfigAdd",
        query: { id, type: "detail" },
      });
    },
    editOutlets(id) {
      this.$router.push({
        path: "/tool/bankBookConfigAdd",
        query: { id },
      });
    },
    addOutlets() {
      this.$router.push({
        path: "/tool/bankBookConfigAdd",
      });
    },
    search() {
      this.searchForm.pageNum = 1;
      this.getList();
    },
    resetForm(form) {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        outletsName: "",
        name: "",
        platformType: "",
        enableStatus: "",
        toolType: "bank_book",
      };
      this.getList();
    },
  },
};
</script>

<style></style>
